﻿/*
 * CSS3でアニメーションの色々なテストをしてみたもの
 * $Id: animation_sample.css 101 2011-01-28 13:26:13Z Noriko.Harashima@gmail.com $
 */
.idea {
        display: -moz-box;
        display: -webkit-box;
        display: box;

        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        border-radius: 50px;

        -moz-box-orient: horizontal;
        -webkit-box-orient: horizontal;
        box-orient: horizontal;

        -moz-box-pack: center;
        -moz-box-align: center;

        -webkit-box-pack: center;
        -webkit-box-align: center;

        box-pack: center;
        box-align: center;

        width: 100px;
        height: 100px;

        position: absolute;
        text-align:center;

        border: 1px solid #eee;
}

/**
 * アイデアのアニメーションに関連するスタイル
 */
.idea {
		// オブジェクトに影をつける（左右 上下 ぼかし範囲 色）
        -webkit-box-shadow: 0 1em 1em rgba(0,0,0,0.2);
		// 1フレームのアニメーションの所要時間を指定する
        -webkit-animation-duration: 0.5s;
		// アニメーションの動き（緩急）を指定する
        -webkit-animation-timing-function: linear;
		// アニメーションを永久ループさせる
        -webkit-animation-iteration-count: infinite;
		// ここでどんなアニメーション（keyframe）を利用するか指定する
        -webkit-animation-name: sample_motion;
}

/**
 * アニメーションで色々お試し
 * ※box-shadowを常に下に置くようにした。
 * ※左右移動（translateX）、回転（rotate）の組み合わせを試した。
 * ※なお、rotateにX, Yをつけると（例：rotateX）3D方向への回転となる。
 */
@@-webkit-keyframes sample_motion {
        0% {
                -webkit-box-shadow: 0 1em 1em rgba(0,0,0,0.2);
                -webkit-transform: translateX(0) rotate(0);
        }
        25% {
                -webkit-box-shadow: 1em 0em 1em rgba(0,0,0,0.2);
                -webkit-transform: translateX(100px) rotate(90deg);
        }
        50% {
                -webkit-box-shadow: 0em -1em 1em rgba(0,0,0,0.2);
                -webkit-transform: translateX(200px) rotate(180deg);
        }
        75% {
                -webkit-box-shadow: 1em 0em 1em rgba(0,0,0,0.2);
                -webkit-transform: translateX(100px) rotate(90deg);
        }
        100% {
                -webkit-box-shadow: 0 1em 1em rgba(0,0,0,0.2);
                -webkit-transform: translateX(0) rotate(0);
        }
}
